import ApiWorkflow from "@/api/workflow";
import ListView from "@/components/app/ListView";
import TodoCard from "@/components/app/TodoCard";

import useList from "@/hooks/useList";
import PopupPlanExecution from "@/pages/index/components/PopupPlanExecution";

import { TaskItem } from "@/types/global";
import { PageContainer } from "@tarojs/components";
import { useDidShow } from "@tarojs/taro";
import { useMount, useResetState, useUpdateEffect } from "ahooks";


type PaneContructionTodosProps = {
  status?: number;
  intentCustomerId: number;
};

export default ({
  status = 0,
  intentCustomerId,
}: PaneContructionTodosProps) => {
  const search = { intentCustomerId, status };

  const { loading, list, resetToFirst } = useList<TaskItem>(ApiWorkflow.todos, {
    // status: 0待办
    defaultParams: [search],
  });

  useUpdateEffect(() => resetToFirst(search), [status]);
  useMount(() => resetToFirst(search))
  useDidShow(() => resetToFirst(search))

  // 原则只有TaskItem.itemType == 2 的情况
  const [selected, setSelected, resetSelected] = useResetState<TaskItem | undefined>(undefined);
  return (
    <>
      <ListView loading={loading} isEmpty={list.length === 0}>
        {list.slice(0, 10).map((item) => (
          <TodoCard pure source={item} key={item.id} onClick={setSelected} />
        ))}
      </ListView>

      <PageContainer
        show={!!selected}
        onAfterLeave={resetSelected}
      >
        {selected && (
          <PopupPlanExecution
            intentCustomerId={intentCustomerId}
            onCancel={resetSelected}
          />
        )}
      </PageContainer>
    </>
  );
};
